<template>
	<view class="page">
		<scroll-view class="page-scroll" scroll-y="true" :lower-threshold="50" @scrolltolower="loadMore">
			<view class="top-bg">
				<view class="status-bar" :style="{ 'paddingTop': statusBarHeight + 'px' }"></view>
				<view class="nav-bar">
					<img src="https://gamumu.hilumo.com/prod-api/files/down/1962784410340995072.png" alt="logo" class="logo" />
					尕木木AI旅拍
				</view>
				<!-- 顶部轮播区域 -->
				<view class="banner-box" v-if="data.banners.length">
					<up-swiper :list="data.banners" :interval="4000" keyName="thumbnailUrl" height="336rpx"
						@click="clickBanner"></up-swiper>
				</view>
			</view>
			<!-- 套系列表 -->
			<view class="template-box">
				<view class="gallery-section" v-for="(item, index) in data.templates" :key="index">
					<view class="section-header">
						<text class="section-title">{{ item.dictLabel }}</text>
						<view class="section-more" @click="clickMore(0, item.dictValue)">
							<view class="arrow">
								<up-icon name="arrow-right" color="#979797" size="14"></up-icon>
							</view>
						</view>
					</view>
					<scroll-view class="gallery-scroll" scroll-x>
						<view class="gallery-content">
							<view class="gallery-item" v-for="(sItem, sIndex) in item.list" :key="index"
								@click="clickGallery(sItem)">
								<view class="img-wrapper">
									<view class="gallery-image2"
										:style="{ 'backgroundImage': 'url(' + sItem.coverUrl + '?style=imageMogr2/thumbnail/400x)' }"></view>
								</view>
								<view class="img-info">
									<view class="gallery-name up-line-1">{{ sItem.name }}</view>
									<view class="gallery-use">{{ sItem.usedNum }} 人使用过</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<up-loadmore v-if="data.templates.length" status="nomore" nomore-text="没有更多了" fontSize="12"
					color="#909399" />
			</view>
		</scroll-view>
		<!-- 底部Tab -->
		<CustomTabBarVue :selected="0" />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	import CustomTabBarVue from '../../components/CustomTabBar.vue';
	import uma from '../../uma.js';
	
	const statusBarHeight = ref(0)
	statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight']
	const location = ref(null)
	const weizhi = ref(null)
	const merchant = ref(null)

	onLoad((options) => {
		if (options.q) {
			// 扫码进入
			processQRCode(options.q)
		} else {
			// 归属地
			if (options.location) {
				location.value = options.location
				uni.setStorageSync('location', options.location)
			} else {
				location.value = null
				uni.removeStorageSync('location')
			}
			if (options.weizhi) {
				weizhi.value = options.weizhi
				uni.setStorageSync('weizhi', options.weizhi)
			} else {
				weizhi.value = null
				uni.removeStorageSync('weizhi')
			}
			if (options.merchant) {
				merchant.value = options.merchant
				uni.setStorageSync('merchant', options.merchant)
			} else {
				merchant.value = null
				uni.removeStorageSync('merchant')
			}
		}
	})
	function processQRCode(qrString) {
	    // 解码URL
	    const decodedUrl = decodeURIComponent(qrString);
	    
	    // 提取location参数
	    const locationMatch = decodedUrl.match(/location=([^&]+)/);
	    const stationLocation = locationMatch ? locationMatch[1] : 0;
			// 提取weizhi参数
	    const weizhiMatch= decodedUrl.match(/weizhi=([^&]+)/);
	    const stationWeizhi = weizhiMatch ? weizhiMatch[1] : 0;
		
		if (stationLocation) {
			location.value = stationLocation
			uni.setStorageSync('location', stationLocation)
		} else {
			location.value = null
			uni.removeStorageSync('location')
		}
		if (stationWeizhi) {
			weizhi.value = stationWeizhi
			uni.setStorageSync('weizhi', stationWeizhi)
		} else {
			weizhi.value = null
			uni.removeStorageSync('weizhi')
		}
		// 埋点：扫码进入首页
		// #ifdef MP-WEIXIN
		uma.trackEvent('scan_index', {
			location: stationLocation,
			weizhi: stationWeizhi
		})
		// #endif
	}
	const themes = ref({
		sjfh: `${getApp().globalData.imgUrl}/prod-api/files/down/1935905590435819520`,
		mwtq: `${getApp().globalData.imgUrl}/prod-api/files/down/1935905682316242944`,
		mshz: `${getApp().globalData.imgUrl}/prod-api/files/down/1935905761693446144`,
	})
	// 响应式数据
	const data = reactive({
		banners: [],
		templates: [],
		categorys: []
	})

	// 获取套系分类--已发布
	function getDictCatType() {
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/system/dict/data/list`,
			data: {
				dictType: 'template_cat_type',
				status: 0,
				pageNum: 1,
				pageSize: 9999
			},
			method: 'GET',
			success: (res) => {
				if (res.data.code === 200) {
					data.categorys = res.data.rows
				}
			},
			fail: (error) => {
				console.log(error);
			}
		});
	}

	// 获取轮播图数据
	function getBanners() {
		const params = {
			status: 1,
			pageNum: 1,
			pageSize: 9999
		}
		if (location.value) {
			params.position = location.value
		}
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/adverts`,
			method: 'GET',
			data: params,
			success: (res) => {
				if (res.data.code === 200) {
					res.data.rows.map(item => {
						item.thumbnailUrl = item.coverUrl + '?style=imageMogr2/thumbnail/1200x'
					})
					data.banners = res.data.rows
				} else {
					uni.showToast({
						icon: 'none',
						title: '系统开小差了'
					})
				}
			},
			fail: (error) => {
				console.log(error);
				uni.showToast({
					icon: 'none',
					title: '系统开小差了'
				})

			}
		});
	}

	// 获取套系数据
	const paginationData = ref({
		pageNum: 1,
		pageSize: 4,
		total: 0
	})

	function getTemplates() {
		const params = {
			pageNum: paginationData.value.pageNum,
			pageSize: paginationData.value.pageSize
		}
		if (location.value) {
			params.ownType = location.value
		}
		uni.showLoading({
			title: '加载中'
		})
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/system/photos/groupByCatType`,
			method: 'GET',
			data: params,
			success: (res) => {
				if (res.data.code === 200) {
					const list = res.data.rows
					data.templates = data.templates.concat(list)
					paginationData.value.total = res.data.total
				} else {
					uni.showToast({
						icon: 'none',
						title: '系统开小差了'
					})
				}
				uni.hideLoading()
			},
			fail: (error) => {
				console.log(error);
				uni.showToast({
					icon: 'none',
					title: '系统开小差了'
				})
			},
		});
	}

	function loadMore() {
		const {
			pageNum,
			pageSize,
			total
		} = paginationData.value
		if (pageNum * pageSize < total) {
			paginationData.value.pageNum += 1
			getTemplates()
		}
	}

	onMounted(() => {
		setTimeout(() => {
			getBanners()
			getDictCatType()
			getTemplates()
		}, 50)
	})

	// banner 点击
	function clickBanner(index) {
		const photoItem = data.banners[index]
		uni.navigateTo({
			url: `/pages/filter/filter?location=${photoItem.position}&category=${photoItem.type}`
		})
	}

	// 点击模板
	function clickGallery(item) {
		uni.navigateTo({
			url: `/pages/detail/detail?uuid=${item.uuid}`
		})
	}

	// 更多点击
	function clickMore(location, category) {
		uni.redirectTo({
			url: `/pages/filter/filter?location=${location}&category=${category}`
		})
	}
	
	// 分享
	onShareAppMessage(res => {
		let path = '/pages/index/index'
		if (location.value) {
			path += `?location=${location.value}`
		}
		return {
			title: '尕木木',
			path
		}
	})
	
	// 分享到朋友圈
	onShareTimeline(res => {
		let path = '/pages/index/index'
		if (location.value) {
			path += `?location=${location.value}`
		}
		return {
			title: '尕木木',
			path
		}
	})
</script>

<style lang="scss" scoped>
	.top-bg {
		background: url('https://gamumu.hilumo.com/prod-api/files/down/1962785973931388928.png') no-repeat;
		background-size: contain;
		.nav-bar {
			height: 84rpx;
			line-height: 84rpx;
			padding: 0 40rpx;
			overflow: hidden;
			.logo {
				width: 40rpx;
				height: 40rpx;
				object-fit: contain;
				margin-right: 10rpx;
				border-radius: 4rpx;
				float: left;
				margin-top: 22rpx;
			}
		}
	}
	.page-scroll {
		height: 100vh;
		padding-bottom: 180rpx;
		box-sizing: border-box;
	}

	.banner-box {
		padding: 20rpx 40rpx 0;
		margin-bottom: 32rpx;
	}

	.theme-section {
		display: flex;
		padding: 20rpx;
		gap: 20rpx;
	}

	.theme-card {
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.theme-card.large {
		width: 350rpx;
		height: 500rpx;
	}

	.theme-right {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.theme-card.small {
		width: 340rpx;
		height: 240rpx;
	}

	.theme-image {
		width: 100%;
		height: 100%;
	}

	.theme-title {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		font-size: 24px;
		color: #FFFFFF;
		font-weight: bold;
		z-index: 1;
	}

	.theme-subtitle {
		position: absolute;
		left: 20rpx;
		top: 70rpx;
		font-size: 12px;
		color: #FFFFFF;
		opacity: 0.8;
		z-index: 1;
	}

	.template-box {
		padding-bottom: 40rpx;
	}

	.gallery-section {
		margin: 32rpx 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333333;
		font-family: PingFang SC;
		font-weight: 600;
		font-style: Heavy;
		position: relative;
	}

	.section-more {
		font-size: 28rpx;
		font-weight: normal;
		color: #979797;
		.arrow {
			float: right;
			margin-top: 6rpx;
		}
	}

	.gallery-scroll {
		width: 100%;
		overflow: auto;
	}

	.gallery-content {
		display: flex;
		gap: 10rpx;
	}

	.gallery-item {
		flex-shrink: 0;
		width: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
	}

	.img-wrapper {
		width: 200rpx;
		height: 268rpx;
	}

	.gallery-image2 {
		width: 200rpx;
		height: 268rpx;
		background-size: 200rpx auto;
		background-repeat: no-repeat;
		background-position: center;
	}
	.img-info {
		border-radius: 0 0 12rpx 12rpx;
		padding: 10rpx 10rpx;
		background: #F2F2F2;
		box-sizing: border-box;
		.gallery-name {
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			line-height: 34rpx;
			height: 34rpx;
			overflow: hidden;
			margin-bottom: 4rpx;
		}
		
		.gallery-use {
			font-size: 20rpx;
			line-height: 28rpx;
			color: #7F7F7F;
		}
	}
</style>